// -------------------------------- 切换两个盒子 ---------------------------------
// 点击登录的盒子里面的a
// $('.login a').on('click', function () {
//   $('.login').hide().next().show();
//   // $('.login').hide().siblings('div').show();
// });

// // 点击注册的盒子里面的a
// $('.register a').on('click', function () {
//   $('.login').show().next().hide();
// })

$('.box a').on('click', function () {
  // $(this) 表示当前点击的 a 标签
  $(this).parents('.box').hide().siblings('.box').show();
})

// let layer = layui.layer;
// layer模块是唯一一个不用加载，能够直接使用的模块

// ------------------------- 注册功能 --------------------------
// 表单提交事件 --> 阻止默认行为 --> 收集数据 --> Ajax提交
$('.register form').on('submit', function (e) {
  e.preventDefault();
  // 收集表单数据（一定要检查 input 的name属性值，是否和接口要求的参数名一致）
  let data = $(this).serialize();
  // console.log(data);
  $.ajax({
    type: 'POST',
    url: '/api/reguser',
    data: data,
    success: function (res) {
      // 无论成功，还是失败，都提示一下
      layer.msg(res.message);
      // alert(res.message);
      // 如果成功了 （清空输入框、切换到登录的盒子）
      if (res.status === 0) {
        $('.register form')[0].reset(); // 清空输入框
        $('.login').show().siblings('.box').hide(); // 切换到登录的盒子
      }
    }
  });
})


// ------------------------- 自定义验证规则 ---------------------
// 1. 加载 form 模块（let 变量 = layui.模块名）
let form = layui.form;
// console.log(form);
// 2. 调用 form.verify() 方法扩展自己的验证规则
form.verify({
  // 键(规则名称): 值(验证的办法)
  // 值(验证的办法，有两种写法，一种是数组，一种是函数)
  // 1. 数组的写法
  // 规则名称: ['正则表达式', '验证不通过时的提示']
  user: [/^\w{2,10}$/, '用户名必须是2~10位'], // \w 表示数字字母下划线。 {2,10}表示2~10位长度；{2,10} 不是 {2, 10}
  pass: [/^\S{6,12}$/, '密码必须是6~12位'], // \S 非空白字符串

  // 2. 函数的写法
  same: function (abc) {
    // 形参 abc，表示使用该验证规则的输入框的值；（案例中确认密码使用了这个验证规则，所以形参表示确认密码的值）
    // return的值就是验证不通过时的提示
    if ($('.pwd').val() !== abc) {
      return '两次密码不一致';
    }
  }
});


// -------------------------- 登录功能 --------------------------
// 表单提交事件 --> 阻止默认行为 --> 收集数据 --> Ajax提交
$('.login form').on('submit', function (e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/api/login',
    data: $(this).serialize(),
    success: function (res) {
      // 登录成功 （提示一下、跳转到index.html）
      if (res.status === 0) {
        layer.msg(res.message, {
          time: 2000 //2秒关闭（如果不配置，默认是3秒）
        }, function () {
          // do something
          // console.log(res);
          // 存储 服务器返回的 token
          localStorage.setItem('token', res.token);
          location.href = './index.html'; // 跳转到index.html
        });
      } else {
        layer.msg(res.message);
      }
    }
  });
})